import React from 'react'
import {
  Text, View, Image, SafeAreaView,
} from 'react-native'
import Navigation, { RouterKey } from '@NAVIGATION/Navigation'
import { useAppSelector } from '@REDUX/store'
import EStyleSheet from 'react-native-extended-stylesheet'
import LinearGradientButton from '@COMPONENTS/button/LinearGradient'
import Button from '@COMPONENTS/button/Button'
import Images from '@IMAGE'
import Api from '@API'
import Storage, { StorageKey } from '@UTILS/Storage'
import AnalyticsUtil, { ANALYTICS_EVENT } from '@UTILS/AnalyticsUtil'
import Dialog from '@COMPONENTS/Dialog'
import Toast from '@COMPONENTS/Toast'

const Setting: React.FC = () => {
  const { user } = useAppSelector((state) => state.user)
  const { UserName } = user
  console.log(user)

  const logOut = () => {
    Dialog.show({
      content: '确定退出当前账户吗？',
      title: '提示',
      onConfirm: () => {
        Api.logout({}).then(() => {
          AnalyticsUtil.onEvent(ANALYTICS_EVENT.tap_setting_introduction.eventId)
          AnalyticsUtil.profileSignOff()
          Storage.set(StorageKey.token, '')
          Navigation.reset(RouterKey.Login)
        }).catch((e) => {
          Toast.error(e.message || e)
        })
      },
    })
  }

  const onForbid = () => {
    Navigation.push(RouterKey.ForbidUser)
  }

  return (
    <SafeAreaView style={styles.page}>
      <View style={styles.content}>
        <View style={styles.item}>
          <Text style={styles.title}>账号</Text>
          <Text style={styles.name}>{UserName}</Text>
        </View>

        <Button style={styles.item} onPress={onForbid}>
          <Text style={styles.title}>注销账号</Text>
          <Text style={styles.text}>注销后账号无法恢复，请谨慎操作</Text>
          <Image source={Images.me.rightArrow} />
        </Button>
      </View>

      <LinearGradientButton
        style={styles.button}
        onPress={logOut}
      >
        <Text style={styles.buttonText}>退出登录</Text>
      </LinearGradientButton>

    </SafeAreaView>
  )
}

export default Setting

const styles = EStyleSheet.create({
  page: {
    flex: 1,
    backgroundColor: '$white',
  },
  content: {
    flex: 1,
  },
  item: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginHorizontal: 20,
    paddingVertical: 23,
    borderBottomWidth: 0.5,
    borderBottomColor: '$border',

  },
  title: {
    fontSize: 16,
    fontFamily: 'PingFangSC-Medium',
    fontWeight: '500',
    color: '#333333',
  },
  name: {
    fontSize: 14,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: '400',
    color: '#C2C2C2',
  },
  text: {
    fontSize: 14,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: '400',
    color: '#8C8C8C',
    marginRight: 8,
    flex: 1,
    textAlign: 'right',
  },
  button: {
    width: 235,
    height: 46,
    borderRadius: 25,
    alignSelf: 'center',
    marginBottom: 48,
    justifyContent: 'center',
  },
  buttonText: {
    fontSize: 16,
    fontFamily: 'PingFangSC-Medium',
    fontWeight: '500',
    color: '$white',
    textAlign: 'center',
  },
})
